<script>
import { useFieldTypeListApi, useTableApi, useTableFieldSubmitApi } from '@/api/table'
import Sortable from 'sortablejs'

export default {
  name: 'GeneratorConfig',
  data() {
    return {
      sortable: null,
      activeName: 'field',
      visible: false,
      typeList: [],
      fieldList: [],
      tableId: null,
      formTypeList: [
        { label: '单行文本', value: 'text' },
        { label: '多行文本', value: 'textarea' },
        { label: '富文本编辑器', value: 'editor' },
        { label: '下拉框', value: 'select' },
        { label: '单选按钮', value: 'radio' },
        { label: '复选框', value: 'checkbox' },
        { label: '日期', value: 'date' },
        { label: '日期时间', value: 'datetime' }
      ],
      fillList: [
        { label: 'DEFAULT', value: 'DEFAULT' },
        { label: 'INSERT', value: 'INSERT' },
        { label: 'UPDATE', value: 'UPDATE' },
        { label: 'INSERT_UPDATE', value: 'INSERT_UPDATE' }
      ],
      queryList: [
        { label: '=', value: '=' },
        { label: '!=', value: '!=' },
        { label: '>', value: '>' },
        { label: '>=', value: '>=' },
        { label: '<', value: '<' },
        { label: '<=', value: '<=' },
        { label: 'like', value: 'like' },
        { label: 'left like', value: 'left like' },
        { label: 'right like', value: 'right like' }
      ]
    }
  },
  methods: {
    handleClick() {

    },
    submitHandle() {
      useTableFieldSubmitApi(this.tableId, this.fieldList).then(() => {
        this.$message.success({
          message: '操作成功',
          duration: 500,
          onClose: () => {
            this.visible = false
            this.$emit('refreshDataList')
          }
        })
      })
    },
    getTable(id) {
      useTableApi(id).then(res => {
        this.fieldList = res.data.fieldList
      })
    },
    rowDrop() {
      this.$nextTick(() => {
        const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
        this.sortable = Sortable.create(el, {
          ghostClass: 'sortable-ghost',
          handle: '.drag-btn',
          onEnd: evt => {
            const { newIndex, oldIndex } = evt
            const currRow = this.fieldList.splice(oldIndex, 1)[0]
            this.fieldList.splice(newIndex, 0, currRow)
          }
        })
      })
    },
    async getFieldTypeList() {
      this.typeList = []
      // 获取数据
      const { data } = await useFieldTypeListApi()
      // 设置属性类型值
      data.forEach((item) => this.typeList.push({ label: item, value: item }))
      // 增加Object类型
      this.typeList.push({ label: 'Object', value: 'Object' })
    },
    initial(id) {
      this.visible = true
      this.tableId = id
      this.rowDrop()
      this.getTable(id)
      this.getFieldTypeList()
      this.activeName = 'field'
    }
  }
}
</script>

<template>
  <el-drawer size="80%" :visible.sync="visible" :with-header="false">
    <div class="config-main">
      <div class="config__body">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="属性设置" name="field">
            <el-table
              ref="listTable"
              border
              row-key="id"
              class="sortable-row-gen"
              :data="fieldList"
              :checkbox-config="{ checkStrictly: true }"
              :edit-config="{ trigger: 'click', mode: 'cell' }"
            >
              <el-table-column type="index" width="60" label="序号" />
              <el-table-column width="60" label="拖动" align="center">
                <template>
                  <i class="el-icon-sort" />
                </template>
              </el-table-column>
              <el-table-column prop="fieldName" label="字段名" />
              <el-table-column prop="fieldComment" label="说明" :edit-render="{ name: 'input' }">
                <template #default="{ row }">
                  <el-input v-model="row.fieldComment" />
                </template>
              </el-table-column>
              <el-table-column prop="fieldType" label="字段类型" />
              <el-table-column prop="attrName" label="属性名">
                <template #default="{ row }">
                  <el-input v-model="row.attrName" />
                </template>
              </el-table-column>
              <el-table-column prop="attrType" label="属性类型">
                <template #default="{ row }">
                  <el-select v-model="row.attrType">
                    <el-option v-for="item in typeList" :key="item.value" :value="item.value" :label="item.label" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="autoFill" label="自动填充">
                <template #default="{ row }">
                  <el-select v-model="row.autoFill">
                    <el-option v-for="item in fillList" :key="item.value" :value="item.value" :label="item.label" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="primaryPk" label="主键">
                <template #default="{ row }">
                  <el-checkbox v-model="row.primaryPk" />
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="表单配置" name="form">
            <el-table
              ref="formTable"
              border
              row-key="id"
              :data="fieldList"
              :checkbox-config="{ checkStrictly: true }"
              :edit-config="{ trigger: 'click', mode: 'cell' }"
            >
              <el-table-column prop="attrName" label="属性名" />
              <el-table-column prop="fieldComment" label="说明" />
              <el-table-column prop="formItem" label="表单显示">
                <template #default="{ row }">
                  <el-checkbox v-model="row.formItem" />
                </template>
              </el-table-column>
              <el-table-column prop="formRequired" label="表单必填">
                <template #default="{ row }">
                  <el-checkbox v-model="row.formRequired" />
                </template>
              </el-table-column>
              <el-table-column prop="formValidator" label="表单效验">
                <template #default="{ row }">
                  <el-input v-model="row.formValidator" />
                </template>
              </el-table-column>
              <el-table-column prop="formType" label="表单类型">
                <template #default="{ row }">
                  <el-select v-model="row.formType">
                    <el-option v-for="item in formTypeList" :key="item.value" :value="item.value" :label="item.label" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="formDict" label="表单字典类型" :edit-render="{ name: 'input' }" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="列表配置" name="grid">
            <el-table
              ref="gridTable"
              border
              row-key="id"
              :data="fieldList"
              :checkbox-config="{ checkStrictly: true }"
              :edit-config="{ trigger: 'click', mode: 'cell' }"
            >
              <el-table-column prop="attrName" label="属性名" />
              <el-table-column prop="fieldComment" label="说明" />
              <el-table-column prop="gridItem" label="列表显示">
                <template #default="{ row }">
                  <el-checkbox v-model="row.gridItem" />
                </template>
              </el-table-column>
              <el-table-column prop="gridSort" label="列表排序">
                <template #default="{ row }">
                  <el-checkbox v-model="row.gridSort" />
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="查询配置" name="query">
            <el-table
              ref="queryTable"
              border
              row-key="id"
              :data="fieldList"
              :checkbox-config="{ checkStrictly: true }"
              :edit-config="{ trigger: 'click', mode: 'cell' }"
            >
              <el-table-column prop="attrName" label="属性名" />
              <el-table-column prop="fieldComment" label="说明" />
              <el-table-column prop="queryItem" label="查询显示">
                <template #default="{ row }">
                  <el-checkbox v-model="row.queryItem" />
                </template>
              </el-table-column>
              <el-table-column prop="queryType" label="查询方式">
                <template #default="{ row }">
                  <el-select v-model="row.queryType">
                    <el-option v-for="item in queryList" :key="item.value" :value="item.value" :label="item.label" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="queryFormType" label="查询表单类型">
                <template #default="{ row }">
                  <el-select v-model="row.queryFormType">
                    <el-option v-for="item in formTypeList" :key="item.value" :value="item.value" :label="item.label" />
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="config__footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submitHandle()">确定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<style scoped lang="scss">
::v-deep .el-drawer__body{
  padding:0 10px;
  box-sizing: border-box;
}

.drag-btn {
  cursor: move;
  font-size: 12px;
}

.config-main{
  position: relative;
  height: 100%;
  width: 100%;

  .config__body {
    position: absolute;
    height: calc(100% - 70px);
    width: 100%;
    overflow: auto;
  }

  .config__footer {
    height: 70px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: right;
  }
}

::v-deep .el-tabs__content{
  overflow: auto;
}

</style>
